<%--
  Created by IntelliJ IDEA.
  User: yz_yang
  Date: 2019/7/9
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>

    <title>LevelList</title>

    <link href="../../resources/css/buttons.css" rel="stylesheet" >
    <link href="../../resources/css/levelList.css" rel="stylesheet" >
    <link href="../../resources/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="../../resources/css/theme.css" rel="stylesheet">
    <link href="../../resources/css/lib/jquery-confirm.min.css" rel="stylesheet">



</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand">${puzzleType} Puzzles</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <form:form method="post" modelAttribute="userInf">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/tutorial">Tutorial</a></li>
                    <li><a title="${userInf.email}">${userInf.username}</a></li>
                    <li><a href="/exit">Logout</a></li>
                    <li><a href="/puzzleType">Back</a></li>
                </ul>
            </form:form>
        </div>
    </div>
</nav>

<div class="button-container">
    <div class="wrap">
        <input id="button-level1" type="button" class="button-3d button-inverse" value="1" onclick="urlLoad('1')">
        <input id="button-level2" type="button" class="button-3d button-inverse" value="2" onclick="urlLoad('2')">
        <input id="button-level3" type="button" class="button-3d button-inverse" value="3" onclick="urlLoad('3')">
        <input id="button-level4" type="button" class="button-3d button-inverse" value="4" onclick="urlLoad('4')">
        <input id="button-level5" type="button" class="button-3d button-inverse" value="5" onclick="urlLoad('5')">
        <input id="button-level6" type="button" class="button-3d button-inverse" value="6" onclick="urlLoad('6')">
        <input id="button-level7" type="button" class="button-3d button-inverse" value="7" onclick="urlLoad('7')">

        <input id="button-disable1" type="button" class="button-disabled"  value=""
               disabled="disabled" onclick="urlLoad('1')">
        <input id="button-disable2" type="button" class="button-disabled"  value=""
               disabled="disabled" onclick="urlLoad('2')">
        <input id="button-disable3" type="button" class="button-disabled" value=""
               disabled="disabled" onclick="urlLoad('3')">
        <input id="button-disable4" type="button" class="button-disabled" value=""
               disabled="disabled" onclick="urlLoad('4')">
        <input id="button-disable5" type="button" class="button-disabled"  value=""
               disabled="disabled" onclick="urlLoad('5')">
        <input id="button-disable6" type="button" class="button-disabled" value=""
               disabled="disabled" onclick="urlLoad('6')">
        <input id="button-disable7" type="button" class="button-disabled" value=""
               disabled="disabled" onclick="urlLoad('7')">
    </div>
</div>

<div class="tutorialBackground" id="tutorialBackground"></div>

<div class="pages" id="pages">
    <div id="nextButton" onclick="nextPage()">>>></div>

    <div class="pageWord" id="page0">There are many game levels for each type of puzzles, from simple to complicated.</div>
    <div class="pageWord" id="page1">The next level will be unlocked after you pass the former one.</div>
    <div class="pageWord" id="page2">Now let's start to challenge level1</div>
</div>

<div class="arrow" id="arrow"></div>
<div id="page2-1">Click here to choose level1.</div>


<script type="text/javascript">
    function urlLoad(no) {
        //alert(document.location.href);
        document.location.href=document.location.href+"/"+no;
    }
</script>

<script>
    currentLevel=1;
    totalLevel=0;
    let i;
    for(i=1;i<=7;i++){
        document.getElementById("button-level"+i).style.display="none";
        document.getElementById("button-disable"+i).style.display="none";
    }

    //alert(document.location.href.indexOf("math"));
    if(document.location.href.indexOf("math")!=-1){
        currentLevel=${userInf.currentLevel[0]};
        // TODO: revise here
        totalLevel=6;
    }
    else if(document.location.href.indexOf("string")!=-1){
        currentLevel=${userInf.currentLevel[1]};
        // TODO: revise here
        totalLevel=3;
    }
    else if(document.location.href.indexOf("array")!=-1){
        currentLevel=${userInf.currentLevel[2]};
        totalLevel=7;
    }
    else if(document.location.href.indexOf("graph")!=-1){
        currentLevel=${userInf.currentLevel[3]};
        // TODO: revise here 3.9
        totalLevel=3;
    }

    for(i=1;i<=currentLevel;i++){
        document.getElementById("button-level"+i).style.display="";
    }
    for(i=currentLevel+1;i<=totalLevel;i++){
        document.getElementById("button-disable"+i).style.display="";
    }

    /* document.getElementById("button-level1").style.display="";
     document.getElementById("button-level2").style.display="";*/
</script>

<script>
    if(${userInf.passTutorial==0}){
        document.getElementById('tutorialBackground').style.display="";
        document.getElementById('nextButton').style.display="";
        document.getElementById('page0').style.display="";
        document.getElementById('page1').style.display="none";
        document.getElementById('page2').style.display="none";
        document.getElementById('page2-1').style.display="none";
        document.getElementById('arrow').style.display="none";
    }
    else{
        document.getElementById('tutorialBackground').style.display="none";
        document.getElementById('pages').style.display="none";
        document.getElementById('page2-1').style.display="none";
        document.getElementById('arrow').style.display="none";
    }
    tutorialNum=0;
</script>

<script type="text/javascript">
    function nextPage() {
        tutorialNum++;
        if(1==tutorialNum){
            document.getElementById('page0').style.display="none";
            document.getElementById('page1').style.display="";
        }
        else if(2==tutorialNum){
            document.getElementById('page1').style.display="none";
            document.getElementById('page2').style.display="";
            document.getElementById('page2-1').style.display="";
            document.getElementById('arrow').style.display="";
            document.getElementById('nextButton').style.display="none";
            document.getElementById('button-level1').style.zIndex=200;
        }
    }
</script>

</body>
</html>